<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

// 需要操作body里面元素的时候，就加window.onload
window.onload = function(){
	var btn = document.getElementById('btn');//抓取按钮元素
	var hd = document.getElementById('hd');//抓到div

	// 处理定时器叠加：在设置定时器之前，先清理定时器

	var timer;//声明timer，避免第一次清理的时候报错
	btn.onclick = function(){
		clearInterval(timer);//清理定时器
		timer = setInterval(function(){
			// 获得现在的width值
			var old_width = parseInt(hd.style.width);
			// 计算新的width值
			var new_width = old_width+5;
			// 将新值赋值给宽高
			hd.style.width = new_width+'px';
			hd.style.height = new_width+'px';
			if (new_width==400) {
				clearInterval(timer);//如果宽高到达400，就清理定时器
				btn.onclick = null;//清理掉btn身上的单击事件
			};

		},100)
		
	}

}



</script>
</head>

<body>
<input type="button" value="点我变大哦！！！" id="btn" />
<br /><br />
<div id="hd" style="width:300px;height:300px;background:purple;"></div>


</body>
</html>
